<template>
	<view>
		<view class="list" :style="{'height':widHeight + 'px' }">
			<u-empty :mode="modeicon" :icon="icon"   :height="height"
				:width="width">
			</u-empty>
			<button v-if="showBut" class="button"  @click="clickBnt" >{{IfShowTextBnt}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "myEmpty",
		props: {
			mode: {
				type: String,
				default: "list"
			},
			windowHeight:{
				type: Number,
				default: 0
			},
			IfShowBut:{
				type: Boolean,
				default: false
			},
			IfShowText:{
				type: String,
				default: '去购物'
			},
			
		},
		data() {
			return {
				widHeight: 0,
				modeicon: "list",				
				IfShowTextBnt: "",				
				height: "250",
				width: "250",
				showBut: false,
				icon: "http://cdn.uviewui.com/uview/empty/list.png",
			};
		},
		mounted() {
			const windowInfo = uni.getWindowInfo()
			this.widHeight = windowInfo.windowHeight -  this.$props.windowHeight//可使用窗口宽度
			this.modeicon = this.$props.mode
			this.icon = this.icon.replace('list',this.modeicon)
			this.showBut = this.$props.IfShowBut
			this.IfShowTextBnt = this.$props.IfShowText
		},
		methods:{
			clickBnt(){
				this.$emit("clickBnt")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		.button{
			margin-top: 20rpx;
			width: 180rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			color: white;
			background-color: #3c9cff;
		}
	}
</style>